import React from 'react';
import {
  Flex
} from 'antd-mobile';
import { info } from './ButttonGoodsInfo.less'

export default function({ bottomGoodsInfo = {} }) {
    const { id ,color = [], eligibility = [], size = "", yieldly="" } = bottomGoodsInfo;


    return (
        <div className={info}>
            <div className="title">商品信息</div>
            <Flex>
                <div className="left">商品编号：</div>
                <div>{id }</div>
            </Flex>

            <Flex>
                <div className="left">产地：</div>
                <div>{yieldly}</div>
            </Flex>
            <Flex>
                <div className="left">尺寸：</div>
                <div>{size}</div>
            </Flex>
            <Flex>
                <div className="left"> 适用人群：</div>
                <div>
                    {
                      eligibility.map((v,i,a)=>{
                          return v
                      })
                    }
                </div>
            </Flex>
            <Flex>
                <div className="left">颜色：</div>
                <div>
                  {
                     color.map((v,i,a)=>{
                      return v
                    })
                   }
                </div>
            </Flex>
        </div>
    );
}

